<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
	<title>插槽slots</title>
	<style>
		.panel{
			max-width: 300px;
			border: 1px solid #999;
			margin-bottom: 15px;
		}
		.panel > *{
			padding: 15px;
		}
		.panel .title{
			border-bottom: 1px solid #999;
		}
		.panel .footer{
			border-top: 1px solid #999;
		}
	</style>
</head>
<body>
	<div id="app">
		<panel>
			<div slot="title">傻大姐</div>
			<div slot="content">ksadkjahdjk</div>
		</panel>
	</div>

	<template id="panel-tpl">
		<div class="panel">
			<div class="title">
				<slot name="title"></slot>
			</div>
			<div class="content">
				<slot name="content"></slot>
			</div>
			<div class="footer">
				<slot name="footer">更多信息</slot>
			</div>
		</div>
	</template>
	<script src="../resource/lib/vue.js"></script>
	<script src="../resource/js/slots.js"></script>
</body>
</html>